<template>
  <div>
    <div class="out-card">
      <div class="card-content">
        <div class="table-common">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="入库管理" name="first">
              <el-radio-group v-model="activeFirstName" style="margin-top: 10px">
                <el-radio-button label="approve">
                  待审批
                  <span class="badge" v-if="allDataInfo[3].num">
                    {{ allDataInfo[3].num > 99 ? '99+' : allDataInfo[3].num }}
                  </span>
                </el-radio-button>
                <el-radio-button label="warehousing">
                  已入库
                  <span class="badge" v-if="allDataInfo[4].num">
                    {{ allDataInfo[4].num > 99 ? '99+' : allDataInfo[4].num }}
                  </span>
                </el-radio-button>
                <el-radio-button label="reject">
                  已驳回
                  <span class="badge" v-if="allDataInfo[1].num">
                    {{ allDataInfo[1].num > 99 ? '99+' : allDataInfo[1].num }}
                  </span>
                </el-radio-button>
              </el-radio-group>
            </el-tab-pane>
            <el-tab-pane label="出库管理" name="second">
              <el-radio-group v-model="activeSecondName" style="margin-top: 10px">
                <el-radio-button label="approve">
                  待审批
                  <span class="badge" v-if="allDataInfo[5].num">
                    {{ allDataInfo[5].num > 99 ? '99+' : allDataInfo[5].num }}
                  </span>
                </el-radio-button>
                <el-radio-button label="warehousing">
                  已出库
                  <span class="badge" v-if="allDataInfo[6].num">
                    {{ allDataInfo[6].num > 99 ? '99+' : allDataInfo[6].num }}
                  </span>
                </el-radio-button>
                <el-radio-button label="reject">
                  已驳回
                  <span class="badge" v-if="allDataInfo[2].num">
                    {{ allDataInfo[2].num > 99 ? '99+' : allDataInfo[2].num }}
                  </span>
                </el-radio-button>
              </el-radio-group>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <layout-card :filters="exampleOptions" :key="filterKey" headline="信息列表" @search-change="searchChange"
      @search-reset="searchReset">
      <template #action>
        <el-button type="primary" @click="handlePrintModal" class="out-btn">打印</el-button>
        <el-button type="primary" @click="handleExport" class="out-btn">导出列表</el-button>
        <el-button type="primary" @click="handleOut" class="out-btn" v-if="taskProcess === '已入库'">申请出库</el-button>
      </template>
      <div class="table-common">
        <div class="goods">
          <div class="goods_content" v-for="(item, index) in tableData" :key="index" @click="goodsClick(item, false)"
            :style="{ marginTop: index < 3 ? '0' : '24px' }">
            <img :src="item.goodsFiles ? item.goodsFiles[0]?.resourceAddress : image.noImg" class="image" />
            <div class="message">
              <div class="message_content">
                <div class="type" :title="item['goodsName']">{{ item['goodsName'] }}</div>
              </div>
              <div class="message_content" style="margin-top: 8px;">
                <div class="headline">物品类型：</div>
                <div class="headline_content">{{ getName('goodsType', item['goodsType']) }}</div>
              </div>
              <div class="message_content" style="margin-top: 4px;">
                <div class="headline">捡拾日期：</div>
                <div class="headline_content">{{ formatMonth(item['pickUpTime']) }}</div>
              </div>
              <div class="message_content" style="margin-top: 4px;">
                <div class="headline">捡拾地：</div>
                <div class="headline_content">{{ item['pickUpPlace'] }}</div>
              </div>
              <div class="message_content" style="margin-top: 4px;">
                <div class="headline">物品编号：</div>
                <div class="headline_content">{{ item['goodsCode'] }}</div>
              </div>
              <div v-if="taskProcess === '已入库'" class="message_content" style="margin-top: 4px;">
                <div class="headline">入库位置：</div>
                <div class="headline_content">{{ item?.nodeContent?.place || '' }}</div>
              </div>
              <div v-if="taskProcess === '出库审批'" class="message_content" style="margin-top: 4px;">
                <div class="headline">入库时间：</div>
                <div class="headline_content">{{ formatTime(item['pickUpTime']) }}</div>
              </div>
              <div v-if="taskProcess === '已出库'" class="message_content" style="margin-top: 4px;">
                <div class="headline">出库时间：</div>
                <div class="headline_content">{{ formatTime(item?.nodeContent?.createTime) }}</div>
              </div>
              <div v-if="taskProcess === '入库审批驳回' || taskProcess === '出库审批驳回'" class="message_content"
                style="margin-top: 4px;">
                <div class="headline">驳回原因：</div>
                <div class="headline_content">{{ item?.nodeContent?.remarks || '-' }}</div>
              </div>
              <el-button type="primary" class="message_btn" v-if="taskProcess === '入库审批' || taskProcess === '出库审批'"
                @click.stop="goodsClick(item, true)">审批</el-button>
              <el-button type="primary" class="message_btn" @click.stop="handleApply(item)"
                :loading="btnloading && applyId === item.taskId"
                v-else-if="taskProcess === '入库审批驳回' || taskProcess === '出库审批驳回'">{{ taskProcess === '入库审批驳回' ? '重新申请入库' :
                  '重新申请出库'
                }}</el-button>
            </div>
            <div
              :class="item['limitTime'] === null ? 'hidden_overdue' : (item['limitTime'] === 0 ? 'red_overdue' : 'green_overdue')">
              {{ item['limitTime'] != null ? (item['limitTime'] === 0 ? '1小时内过期' : `${item['limitTime']} 小时后过期`) : '' }}
            </div>
          </div>
        </div>
        <div>
          <TablePagination :small="false" :pagination="pager" @current-change="currentChange" @size-change="sizeChange" />
        </div>
      </div>
    </layout-card>
    <edit-dialog :centerDialogVisible="detailsDialogVisible" :tilte="tilte" @Cancel="detailsDialogVisible = false"
      @Submit="Submit" :defaultButton="defaultButton" :width="dialogWidth" class="edit-modal">
      <template #content>
        <div class="detail_content">
          <div class="image-box">
            <img v-if="!goodsObject.goodsFiles" class="content_img" :src="image.noImg" />
            <div class="image-box-top" v-else>
              <el-icon size="30px" class="image-box-top-icon" @click="changeImage('left')"
                :style="{ cursor: imageInfo.imageIndex === 0 ? 'not-allowed' : 'pointer' }" v-if="imageInfo.imgLen > 1">
                <ArrowLeftBold />
              </el-icon>
              <img :src="imageInfo.imgArr[imageInfo.imageIndex]" class="content_img"
                @click="handlePicPreview(imageInfo.imgArr[imageInfo.imageIndex])" />
              <el-icon size="30px" class="image-box-top-icon" @click="changeImage('right')"
                :style="{ cursor: imageInfo.imageIndex === imageInfo.imgLen - 1 ? 'not-allowed' : 'pointer' }"
                v-if="imageInfo.imgLen > 1">
                <ArrowRightBold />
              </el-icon>
            </div>
            <div class="image-box-bottm" v-show="imageInfo.imgLen > 1">
              <img v-for="(item, index) in imageInfo.imgArr" @click="imageInfo.imageIndex = index" :src="item" :key="item"
                :style="{ border: imageInfo.imageIndex === index ? '1px solid #555df8' : '1px solid transparent' }">
            </div>
          </div>
          <div class="detail_body">
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">物品名称：</div>
                <div class="message_content name_box" :title="goodsObject['goodsName'] || ''">{{ goodsObject['goodsName']
                }}
                </div>
              </div>
              <div class="body_message">
                <div class="message_title">物品类型：</div>
                <div class="message_content">{{ getName('goodsType', goodsObject['goodsType']) }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">物品编号：</div>
                <div class="message_content">{{ goodsObject['goodsCode'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">捡拾日期：</div>
                <div class="message_content">{{ formatTime(goodsObject['pickUpTime']) }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">保质期：</div>
                <div class="message_content">{{ `
                  ${goodsObject['timeLimit']}${getUnit(goodsObject['timeLimitUnit'])}` }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">物品时效：</div>
                <div class="message_content">{{ formatTime(goodsObject['goodsLimitTime']) }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">捡拾人姓名：</div>
                <div class="message_content">{{ goodsObject['pickUpName'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">捡拾人电话：</div>
                <div class="message_content">{{ goodsObject['pickUpPhone'] }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">航站楼【捡拾】：</div>
                <div class="message_content">{{ goodsObject['pickUpTerminal'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">捡拾地：</div>
                <div class="message_content">{{ goodsObject['pickUpPlace'] }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">航站楼【存放】：</div>
                <div class="message_content">{{ goodsObject['depositTerminal'] }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">存放地：</div>
                <div class="message_content">{{ getName('depositPlace', goodsObject['depositPlace']) }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">登记人：</div>
                <div class="message_content">{{ goodsObject?.creator?.name || '-' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">登记时间：</div>
                <div class="message_content">{{ formatTime(goodsObject['createTime']) }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="out-operate">
          <!-- 入库审批驳回 -->
          <template v-if="status === 1">
            <div class="out-operate-title">入库信息</div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">审批人:</div>
                <div class="message_content">{{ goodsObject?.inRejectData?.nodeData?.creator?.name || '--' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">审批时间:</div>
                <div class="message_content">{{ goodsObject?.inRejectData?.nodeData?.createTime &&
                  formatTime(goodsObject?.inRejectData?.nodeData?.createTime) || '--' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">入库驳回原因：</div>
                <div class="message_content name_box" :title="goodsObject?.inRejectData?.nodeData?.remarks || ''">{{
                  goodsObject?.inRejectData?.nodeData?.remarks || '--' }}</div>
              </div>
            </div>
          </template>
          <!-- 展示节点：已入库、出库审批、已出库 -->
          <template v-if="status > 3 || status === 2">
            <div class="out-operate-title">入库信息</div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">入库人：</div>
                <div class="message_content">{{ goodsObject?.jectData?.nodeUserName || '-' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">入库时间：</div>
                <div class="message_content">{{ formatTime(goodsObject?.jectData?.nodeTime) }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">航站楼:</div>
                <div class="message_content">{{ goodsObject?.jectData?.nodeData?.terminal || '-' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">入库位置:</div>
                <div class="message_content name_box" :title="goodsObject?.jectData?.nodeData?.place || ''">{{
                  goodsObject?.jectData?.nodeData?.place || '-' }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">附件：</div>
                <div class="message_img_box" v-if="goodsObject?.jectData?.nodeData?.files?.length">
                  <img class="message_img" v-for="item in goodsObject.jectData.nodeData.files" :src="item.resourceAddress"
                    title="点击查看大图" :key="item" @click="handlePicPreview(item.resourceAddress)" />
                </div>
              </div>
            </div>
          </template>
          <!-- 展示节点：出库审批、已出库 -->
          <template v-if="status > 5">
            <div class="out-operate-title">出库申请</div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">申请人：</div>
                <div class="message_content">{{ goodsObject?.outData?.nodeData?.creator?.name || '-' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">申请时间:</div>
                <div class="message_content">{{ formatTime(goodsObject?.outData?.nodeData?.createTime) }}</div>
              </div>
            </div>
          </template>
          <!-- 出库审批驳回 -->
          <template v-if="status === 2">
            <div class="out-operate-title">出库申请</div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">审批人:</div>
                <div class="message_content">{{ goodsObject?.outRejectData?.nodeData?.creator?.name || '--' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">审批时间:</div>
                <div class="message_content">{{ goodsObject?.outRejectData?.nodeData?.createTime &&
                  formatTime(goodsObject?.outRejectData?.nodeData?.createTime) || '--' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">出库驳回原因：</div>
                <div class="message_content">{{ goodsObject?.outRejectData?.nodeData?.remarks || '--' }}</div>
              </div>
            </div>
          </template>
          <!-- 展示节点：已出库 -->
          <template v-if="status > 5">
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">航站楼:</div>
                <div class="message_content">{{ goodsObject?.completeData?.nodeData?.terminal || '-' }}</div>
              </div>
              <div class="body_message">
                <div class="message_title">入库位置:</div>
                <div class="message_content">{{ goodsObject?.completeData?.nodeData?.place || '-' }}</div>
              </div>
            </div>
            <div class="body_box">
              <div class="body_message">
                <div class="message_title">附件：</div>
                <div class="message_img_box" v-if="goodsObject?.completeData?.nodeData?.files?.length">
                  <img class="message_img" v-for="item in goodsObject.completeData.nodeData.files"
                    :src="item.resourceAddress" title="点击查看大图" :key="item"
                    @click="handlePicPreview(item.resourceAddress)" />
                </div>
              </div>
            </div>
            <!-- <div class="out-operate-title">出库时间</div>
          <div class="body_box">
            <div class="body_message">
              <div class="message_title">预计送达柜台时间:</div>
              <div class="message_content">{{ formatTime(goodsObject?.completeData?.nodeData?.planTime) }}
              </div>
            </div>
          </div> -->
          </template>
          <!-- 展示节点：入库/出库审批 -->
          <template v-if="status === 3 || status === 5">
            <div class="out-operate-box" style="margin-top: 20px">
              <div class="out-operate-box-label" style="font-weight: bold;">{{ status === 3 ? '入库申请:' : '出库申请:' }}</div>
              <el-radio-group v-model="form.type">
                <el-radio :label="1">通过</el-radio>
                <el-radio :label="2">驳回</el-radio>
              </el-radio-group>
            </div>
            <!-- 入库审批-通过 -->
            <template v-if="form.type === 1">
              <div class="out-operate-title">{{ status === 3 ? '入库信息' : '出库信息' }}</div>
              <div class="out-flex-box">
                <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" :inline="true">
                  <el-form-item label="航站楼" prop="storeTerminal">
                    <el-select v-model="form.storeTerminal" class="m-2" placeholder="请选择航站楼" size="large">
                      <el-option v-for="item in terminalData" :label="item.label" :value="item.value" :key="item.value" />
                    </el-select>
                  </el-form-item>
                  <el-form-item :label="status === 3 ? '入库位置' : '出库位置'" prop="storePosition">
                    <el-input v-model="form.storePosition" maxlength="50" />
                  </el-form-item>
                  <el-form-item label="附件" prop="fileList">
                    <el-upload v-model:file-list="form.fileList" class="upload-demo" accept=".jpg,.jpeg,.png,.svg"
                      :on-change="handleChangeFile" action="#" multiple :limit="10" :auto-upload="false">
                      <!-- <el-button type="primary">Click to upload</el-button> -->
                      <button>选择文件</button>&nbsp;&nbsp;
                      <template #tip>
                        <span>未选择任何文件</span>
                      </template>
                    </el-upload>
                  </el-form-item>
                </el-form>
              </div>
            </template>
            <!-- 入库审批-驳回 -->
            <template v-else-if="form.type === 2">
              <div class="out-operate-title">审批意见</div>
              <el-input v-model="form.remarks" :rows="5" type="textarea" maxlength="200" />
            </template>
          </template>
        </div>
      </template>
      <template #custom>
        <!-- 出库审批 -->
        <span class="dialog-footer" v-if="status === 3 || status === 5">
          <el-button @click="detailsDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave(formRef)" :disabled="!form.type"
            :loading="btnloading">保存</el-button>
        </span>
      </template>
    </edit-dialog>
    <edit-dialog :centerDialogVisible="outModalInfo.visible" tilte="申请出库" @Cancel="outModalInfo.visible = false"
      :defaultButton="false" width="100%">
      <template #content>
        <div>查询条件</div>
        <FilterBar ref="FilterRef" :close-collapse="true" :filters="exampleOptions" @search-change="searchChange"
          @search-reset="searchReset" />
        <div class="out-box">
          <div v-for="(item, index) in tableData" :key="index" @click="goodsOutClick(item.taskId)"
            :class="['out-box_content', outModalInfo.selectKey.includes(item.taskId) ? 'out-box_active' : 'out-box_default']">
            <img :src="item.goodsFiles ? item.goodsFiles[0]?.resourceAddress : image.noImg" class="image" />
            <div class="out-box-message">
              <el-icon class="message-icon" size="28px"
                :color="outModalInfo.selectKey.includes(item.taskId) ? '#409EFF' : '#d6d4d4'">
                <CircleCheckFilled />
              </el-icon>
              <div class="message_content">
                <div class="type">{{ item['goodsName'] }}</div>
              </div>
              <div class="message_content" style="margin-top: 8px;">
                <div class="headline">物品类型：</div>
                <div class="headline_content">{{ getName('goodsType', item['goodsType']) }}</div>
              </div>
              <div class="message_content" style="margin-top: 4px;">
                <div class="headline">捡拾日期：</div>
                <div class="headline_content">{{ formatMonth(item['pickUpTime']) }}</div>
              </div>
              <div class="message_content" style="margin-top: 4px;">
                <div class="headline">捡拾地：</div>
                <div class="headline_content">{{ item['pickUpPlace'] }}</div>
              </div>
              <div class="message_content" style="margin-top: 4px;">
                <div class="headline">物品编号：</div>
                <div class="headline_content">{{ item['goodsCode'] }}</div>
              </div>
              <div class="message_content" style="margin-top: 4px;">
                <div class="headline">入库位置：</div>
                <div class="headline_content">{{ item?.nodeContent?.place || '' }}</div>
              </div>
            </div>
            <!-- <div
                      :class="item['overdue'] === '0' ? 'hidden_overdue' : (item['overdue'] === '1' ? 'red_overdue' : 'green_overdue')">
                      {{ item['overdue'] === '0' ? '' : (item['overdue'] === '1' ? '已过期' : '12 小时后过期') }}
                  </div> -->
          </div>
        </div>
      </template>
      <template #custom>
        <el-button @click="outModalInfo.visible = false">取消</el-button>
        <el-button type="primary" @click="SubmitOut" :loading="outModalInfo.loading"
          :disabled="outModalInfo.selectKey.length === 0">申请出库</el-button>
      </template>
    </edit-dialog>
    <edit-dialog :centerDialogVisible="printModalInfo.visible" tilte="打印" @Cancel="printModalInfo.visible = false"
      :defaultButton="false" width="98%">
      <template #content>
        <table-common :columns="printModalInfo.columns" :border="true" :loading="loading"
          :table-data="printModalInfo.list" size="large" :pagination="false">
          <template #goodsType="{ row }">
            {{ getName('goodsType', row['goodsType']) }}
          </template>
          <template #pickUpTime="{ row }">
            {{ formatMonth(row['pickUpTime']) }}
          </template>
          <template #outTime="{ row }">
            {{ formatMonth(row['outTime']) }}
          </template>
          <template #timeLimitUnit="{ row }">
            {{ getUnit(row['timeLimitUnit']) }}
          </template>
          <template #goodsLimitTime="{ row }">
            {{ formatTime(row['goodsLimitTime']) }}
          </template>
          <template #depositPlace="{ row }">
            {{ getName('depositPlace', row['depositPlace']) }}
          </template>
          <template #createTime="{ row }">
            {{ formatTime(row['createTime']) }}
          </template>
          <template #creator="{ row }">
            {{ row.creator.name || '' }}
          </template>
        </table-common>
        <div ref="print" id="printContent">
          <div class="print-row print-th">
            <div class="print-cell" v-for="item in printModalInfo.columns" :key="item.label">{{ item.label }}</div>
          </div>
          <div class="print-row" v-for="ele in printModalInfo.list" :key="ele.taskId">
            <div class="print-cell" v-for="item in printModalInfo.columns" :key="item.prop">
              <template v-if="item.prop === 'goodsType'">
                {{ getName('goodsType', ele['goodsType']) }}
              </template>
              <template v-else-if="item.prop === 'pickUpTime'">
                {{ formatMonth(ele['pickUpTime']) }}
              </template>
              <template v-else-if="item.prop === 'outTime'">
                {{ formatMonth(ele['outTime']) }}
              </template>
              <template v-else-if="item.prop === 'timeLimitUnit'">
                {{ getUnit(ele['timeLimitUnit']) }}
              </template>
              <template v-else-if="item.prop === 'goodsLimitTime'">
                {{ formatTime(ele['goodsLimitTime']) }}
              </template>
              <template v-else-if="item.prop === 'depositPlace'">
                {{ getName('depositPlace', ele['depositPlace']) }}
              </template>
              <template v-else-if="item.prop === 'createTime'">
                {{ formatTime(ele['createTime']) }}
              </template>
              <template v-else-if="item.prop === 'creator'">
                {{ ele.creator.name || '' }}
              </template>
              <template v-else>
                {{ ele[item.prop] }}
              </template>
            </div>
          </div>
        </div>
      </template>
      <template #custom>
        <el-button @click="printModalInfo.visible = false">取消</el-button>
        <el-button type="primary" @click="handlePrint" :disabled="printModalInfo.list.length === 0">打印</el-button>
      </template>
    </edit-dialog>

    <el-dialog v-model="dialogVisible" style="text-align: center;" width="80%">
      <img :src="dialogImageUrl" style="max-width: 90%;min-width: 20%" />
    </el-dialog>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, watch, computed } from 'vue'
import { useStore } from 'vuex'
import dayjs from 'dayjs';
import LayoutCard from '@/components/LayoutCard/index.vue'
import { ElMessage } from 'element-plus'
import type { TabsPaneContext, TabPaneName, UploadUserFile, UploadProps, FormRules, FormInstance } from 'element-plus'
import editDialog from '@/components/editDialog/index.vue'
import TablePagination from '@/components/TablePagination/index.vue'
import { queryGoodsTypeFind, queryGoodsRegFindPage, queryGoodsRegFindList, queryGoodsRegDetail, outInStorageExportXls } from '@/api/lose/goodsInOut'
import { processComplete, uploadFiles } from '@/api/common'
import { getResource } from '@/api/resource'
import FilterBar from '@/components/FilterBar/index.vue'
import TableCommon from '@/components/TableCommon/index.vue'
import Print from 'vue-print-nb-jeecg/src/printarea';
import { image } from '@/assets/index'

interface RuleForm {
  type: number;
  storeTerminal: string;
  storePosition: string;
  remarks: string;
  fileList: UploadUserFile[];
}
interface OutRuleForm {
  planTime?: string;
  remarks?: string;
  switch: number;
}
interface OutModal {
  visible: boolean;
  loading: boolean;
  selectKey: Array<string>;
}
interface PrintModal {
  visible: boolean;
  list: Array<any>;
  columns: Array<any>;
}
interface ItemType {
  taskContent?: string;
  nodeContent?: string;
  limitTime?: number
}
interface DataType {
  regId?: string,
  goodsName?: string,
  goodsType?: string,
  pickUpTime?: string,
  pickUpPlace?: string,
  goodsCode?: string,
  expireCountDown?: string,
  taskId?: string,
  taskProcess?: string,
  taskContent?: string,
  nodeContent?: string
}
interface TypeInter {
  typeId?: string;
  createTime?: string;
  goodsType?: string;
  isDisable?: string;
}
interface FileDataType {
  enclosureContent: string,
  enclosureName: string,
  enclosureSuffix: string,
  resourceAddress: string,
  enclosureCode: string,
}

const exampleColumns = [
  { prop: 'goodsCode', label: '物品编号', align: 'center' },
  { prop: 'goodsName', label: '物品名称', align: 'center' },
  { prop: 'goodsType', label: '物品类型', align: 'center' },
  { prop: 'pickUpTime', label: '捡拾日期', align: 'center' },
  { prop: 'timeLimit', label: '保存时限', align: 'center' },
  { prop: 'timeLimitUnit', label: '保存时限单位', align: 'center' },
  { prop: 'goodsLimitTime', label: '物品时效', align: 'center' },
  { prop: 'pickUpName', label: '捡拾人姓名', align: 'center' },
  { prop: 'pickUpPhone', label: '捡拾人电话', align: 'center' },
  { prop: 'pickUpTerminal', label: '捡拾航站楼', align: 'center' },
  { prop: 'pickUpPlace', label: '捡拾地', align: 'center' },
  { prop: 'depositTerminal', label: '存放航站楼', align: 'center' },
  { prop: 'depositPlace', label: '存放地', align: 'center' },
  { prop: 'creator', label: '创建者', align: 'center' },
  { prop: 'createTime', label: '创建时间', align: 'center' },

]

const store = useStore()
// 标题名
const activeName = ref('first')
// 审批弹窗是否打开
const detailsDialogVisible = ref(false)
// 弹窗标题
const tilte = ref('通过')
const loading = ref(false)
const btnloading = ref(false)
const applyId = ref('')
const tableData = ref([])
const dialogWidth = ref('760px')
const defaultButton = ref(true)
const goodsObject = ref()
const activeFirstName = ref('approve')
const activeSecondName = ref('approve')
const placeData = ref([]) // 存放地址
const terminalData = ref([] as any[]) // 航站
const typeData = ref([])
const exampleOptions = ref([])
const status = ref(3) // 1.入库审批驳回 2.出库审批驳回 3.入库审批 4.已入库 5.出库审批 6.已出库
const dialogImageUrl = ref('') // 图片地址
const dialogVisible = ref(false) // 图片预览弹窗
const taskProcess = ref('入库审批')
// const taskProcess = ref('入库审批')

const filterData = ref([
  {
    label: '物品编号',
    prop: 'goodsCode',
    type: 'input',
    inputProps: {
      clearable: true,
      placeholder: '请输入物品编号'
    }
  },
  {
    label: '物品名称',
    prop: 'goodsName',
    type: 'input',
    inputProps: {
      clearable: true,
      placeholder: '请输入物品名称'
    }
  },
  {
    label: '捡拾时间',
    prop: 'endTime',
    type: 'datePicker',
    defaultValue: [],
    inputProps: {
      type: 'daterange',
      'value-format': 'YYYY-MM-DD'
    }
  },
  {
    label: '入库位置',
    prop: 'place',
    type: 'input',
    inputProps: {
      clearable: true,
      placeholder: '请输入入库位置'
    }
  },
  {
    label: '航站楼',
    prop: 'storeTerminal',
    type: 'checkbox',
    defaultValue: [],
    inputProps: {
      showCheckAll: true,
      options: []
    }
  },
  {
    label: '物品类型',
    prop: 'goodsType',
    type: 'checkbox',
    span: 16,
    defaultValue: [],
    inputProps: {
      // 控制是否显示权限功能
      showCheckAll: true,
      options: []
    }
  },
  // {
  //   label: '入库时间',
  //   prop: 'pickUpTime',
  //   type: 'datePicker',
  //   defaultValue: [],
  //   inputProps: {
  //     type: 'daterange',
  //     'value-format': 'YYYY-MM-DD'
  //   }
  // },
])
const formRef = ref<FormInstance>()
const print = ref(null)

const allDataInfo = reactive({
  1: { // 入库被驳回
    list: [] as any[],
    num: 0,
  },
  2: { // 出库被驳回
    list: [] as any[],
    num: 0,
  },
  3: { // 入库审批
    list: [] as any[],
    num: 0,
  },
  4: { // 已入库
    list: [] as any[],
    num: 0,
  },
  5: { // 出库审批
    list: [] as any[],
    num: 0,
  },
  6: { // 已出库
    list: [] as any[],
    num: 0,
  },
})

const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const imageInfo = reactive({
  imageIndex: 0,
  imgArr: [],
  imgLen: 0,
})
const form = reactive<RuleForm>({
  type: 0,
  storeTerminal: '',
  storePosition: '',
  remarks: '',
  fileList: [],
})
const rules = reactive<FormRules<RuleForm>>({
  storeTerminal: [{ required: true, message: '请选择航站楼', trigger: 'blur' }],
  storePosition: [{ required: true, message: '请输入入库位置', trigger: 'blur' }],
})
// 申请出库
const outModalInfo = reactive<OutModal>({
  visible: false,
  loading: false,
  selectKey: []
})
// 打印
const printModalInfo = reactive<PrintModal>({
  visible: false,
  list: [],
  columns: []
})

const userInfo = computed(() => store.state.user.userInfo)


const handleChangeFile: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  console.log('uploadFile', uploadFile)
  console.log('uploadFiles', uploadFiles)
  if (!!(uploadFile.raw.type.indexOf("image") == -1)) {
    ElMessage.error('图片格式不正确')
  } else if (uploadFile.size / 1024 / 1024 > 10) {
    ElMessage.error('上传图片大小不能超过 10MB!')
  }
  form.fileList = uploadFiles.filter((item: any) => item.raw?.type.indexOf('image') > -1 && item.size / 1024 / 1024 < 10)
}

/**
* 切换显示图片
*/
const changeImage = (value: string) => {
  if ((value === 'left' && imageInfo.imageIndex === 0) || (value === 'right' && imageInfo.imageIndex === imageInfo.imgLen - 1)) {
    return
  }
  if (value === 'left') {
    imageInfo.imageIndex = imageInfo.imageIndex - 1
  } else {
    imageInfo.imageIndex = imageInfo.imageIndex + 1
  }
}

/**
* 获取单位
*/
const getUnit = (val: string) => {
  if (!val) {
    return ''
  } else if (val === 'Y') {
    return '年'
  } else if (val === 'M') {
    return '月'
  } else if (val === 'D') {
    return '天'
  } else if (val === 'H') {
    return '小时'
  }

}

// 获取名称
const getName = (key: string, value: string) => {
  if (key === 'goodsType') {
    let newData = typeData.value.find((item: TypeInter) => item.typeId === value) || {};
    return newData.goodsType || ''
  } else if (key === 'depositPlace') {
    let newData = placeData.value.find((item: TypeInter) => item.value === value) || {};
    return newData.label || ''
  }

}

const formatTime = (str: string) => {
  if (!str) {
    return ''
  }
  return dayjs(str).format('YYYY-MM-DD HH:mm:ss')
}
const formatMonth = (str: string) => {
  if (!str) {
    return ''
  }
  return dayjs(str).format('YYYY-MM-DD')
}
// 获取导出文件名
const getFileName = () => {
  let name = ''
  switch (status.value) {
    case 1:
      name = '入库驳回导出'
      break;
    case 2:
      name = '出库驳回导出'
      break;
    case 3:
      name = '入库审批导出'
      break;
    case 4:
      name = '已入库导出'
      break;
    case 5:
      name = '出库审批导出'
      break;
    case 6:
      name = '已出库导出'
      break;
    default:
      break;
  }
  return name
}

const getFiles = async () => {
  let files: Array<FileDataType> = []
  let len = form.fileList.length;
  for (let i = 0; i < len; i++) {
    let ele: any = form.fileList[i];
    const fileName = ele.name;
    const index = fileName.lastIndexOf('.')
    const name = fileName.slice(0, index)
    let formData = new FormData();
    formData.append('file', ele.raw)
    formData.append('fileName', name)
    let res = null;
    try {
      res = await uploadFiles(formData)
    } catch {
      ElMessage.error(`${name}上传失败`)
    }
    if (res?.data) {
      files.push({
        enclosureContent: res.data.enclosureContent, // 文件名 TCDM.md
        enclosureName: res.data.enclosureName, // 文件前缀 TCDM
        enclosureSuffix: res.data.enclosureSuffix, // 文件后缀md
        resourceAddress: res.data.resourceAddress, // 文件相对地址，网关地址+resourceAddres即可完成下载
        enclosureCode: res.data.enclosureCode // 唯一标识
      })
    }
  }
  return files
}

/**
* 入库/出库审批
*/
const handleSave = async (formEl: FormInstance | undefined) => {
  let isUpload = true;
  if (formEl) {
    await formEl.validate(async (valid, fields) => {
      if (!valid) {
        isUpload = false;
      }
    })
  }
  if (isUpload) {
    btnloading.value = true;
    let param = {}
    let paramsData = {
      creator: {
        id: userInfo.value.userId,
        name: userInfo.value.name,
        userName: userInfo.value.userName,
        organId: userInfo.value.organId || '',
        organName: userInfo.value.organName || ''
      },
      createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
    switch (status.value) {
      // 入库/出库审批
      case 3:
      case 5:
        // 通过
        if (form.type === 1) {
          let files: Array<FileDataType> = []
          if (form.fileList) {
            files = await getFiles()
          }
          param = {
            id: goodsObject.value.taskId,
            variables: {
              switch: 2
            },
            content: {
              ...paramsData,
              terminal: form.storeTerminal,
              files: files,
              place: form.storePosition,

            }
          }
          // 驳回
        } else {
          param = {
            id: goodsObject.value.taskId,
            variables: {
              switch: 3
            },
            content: {
              ...paramsData,
              remarks: form.remarks,
            }
          }
        }
        break;
        // // 出库审批
        // case 5:
        //   // 通过
        //   if (outForm.switch === 2) {
        //     param = {
        //       id: goodsObject.value.taskId,
        //       variables: {
        //         switch: 2
        //       },
        //       content: {
        //         ...paramsData,
        //         planTime: outForm.planTime,
        //       }
        //     }
        //     // 驳回
        //   } else {
        //     param = {
        //       id: goodsObject.value.taskId,
        //       variables: {
        //         switch: 3
        //       },
        //       content: {
        //         ...paramsData,
        //         remarks: outForm.remarks,
        //       }
        //     }
        //   }
        break;
      default:
        break;
    }

    processComplete(param).then((res: any) => {
      if (res?.code === '1') {
        ElMessage.success('操作成功')
        getData()
        getList()
      } else {
        ElMessage.error('操作失败')
      }
      detailsDialogVisible.value = false
      btnloading.value = false
    }).catch((err: any) => {
      ElMessage.error(err.message || '操作失败')
      btnloading.value = false;
    })
  }
}
/**
* 重新申请入库/重新申请出库
*/
const handleApply = async (item: DataType) => {
  btnloading.value = true;
  applyId.value = item.taskId
  let param = {}
  let paramsData = {
    creator: {
      id: userInfo.value.userId,
      name: userInfo.value.name,
      userName: userInfo.value.userName,
      organId: userInfo.value.organId || '',
      organName: userInfo.value.organName || ''
    },
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
  if (taskProcess.value === '入库审批驳回') {
    param = {
      id: item.taskId,
      variables: {
        switch: 3
      },
      content: {
        ...paramsData
      }
    }
  } else {
    param = {
      id: item.taskId,
      variables: {
        switch: 2
      },
      content: {
        ...paramsData
      }
    }
  }
  processComplete(param).then((res: any) => {
    if (res?.code === '1') {
      ElMessage.success('操作成功')
      getData()
      getList()
    } else {
      ElMessage.error('操作失败')
    }
    btnloading.value = false
    applyId.value = ''
  }).catch((err: any) => {
    ElMessage.error(err.message || '操作失败')
    btnloading.value = false;
    applyId.value = ''
  })
}
/**
* 预览图片
*/
const handlePicPreview = (url: string) => {
  dialogImageUrl.value = url
  dialogVisible.value = true
}

/**
* 显示打印弹窗
*/
const handlePrintModal = () => {
  let newValue = [...exampleColumns];
  let value: number = status.value;
  let newList = allDataInfo[value].list;
  printModalInfo.visible = true;
  printModalInfo.list = newList
  printModalInfo.columns = newValue
}
/**
* 打印
*/
const handlePrint = () => {
  print.value && (print.value.style.display = 'block')
  new Print({
    el: '#printContent',
    endCallback() {
      print.value && (print.value.style.display = 'none')
    },
  });
}

/**
* 导出
*/
const handleExport = async () => {
  let searchData: any = { ...search.value }
  if (search.value.endTime && search.value.endTime?.length > 0) {
    searchData.startTime = search.value.endTime[0] && dayjs(search.value.endTime[0]).format('YYYY-MM-DD 00:00:00') || ''
    searchData.endTime = search.value.endTime[1] && dayjs(search.value.endTime[1]).format('YYYY-MM-DD 23:59:59') || ''
  } else {
    delete searchData.endTime
  }
  if (search.value.goodsType) {
    searchData.goodsType = searchData.goodsType.join(' ')
  }
  if (search.value.storeTerminal) {
    searchData.storeTerminal = searchData.storeTerminal.join(' ')
  }
  searchData.taskProcess = taskProcess.value
  for (let key in searchData) {
    if (!searchData[key]) {
      delete searchData[key]
    }
  }
  const res: any = await outInStorageExportXls(searchData);
  const link = document.createElement("a");
  const blob = new Blob([res], { type: "application/vnd.ms-excel" });
  const fileName = getFileName(); // 获取文件名
  link.style.display = "none";
  link.href = URL.createObjectURL(blob);
  link.setAttribute("download", `${fileName}${dayjs().format('YYYY-MM-DD')}.xlsx`);  //报表名称可自定义
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

/**
* 选中物品
*/
const goodsOutClick = (id: string) => {
  let selectKey = outModalInfo.selectKey;
  if (selectKey.includes(id)) {
    selectKey = selectKey.filter(item => item !== id)
  } else {
    selectKey.push(id)
  }
  outModalInfo.selectKey = selectKey
}

/**
* 申请出库
*/
const handleOut = () => {
  outModalInfo.visible = true
  outModalInfo.loading = false
  outModalInfo.selectKey = []
}

/**
* 申请出库弹窗点击确认
*/
const SubmitOut = () => {
  outModalInfo.loading = true;
  let paramsData = {
    creator: {
      id: userInfo.value.userId,
      name: userInfo.value.name,
      userName: userInfo.value.userName,
      organId: userInfo.value.organId || '',
      organName: userInfo.value.organName || ''
    },
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
  let paramsAll: any = []
  outModalInfo.selectKey.forEach(item => {
    paramsAll.push(processComplete({
      id: item,
      variables: {
        switch: 2
      },
      content: {
        ...paramsData
      }
    }))
  })

  Promise.all(paramsAll).then(() => {
    ElMessage.success('操作成功')
    outModalInfo.visible = false
    outModalInfo.loading = false
    getData()
    getList()
  }).catch(() => {
    ElMessage.error('操作失败')
    outModalInfo.loading = false
  })
}

/**
* 弹窗点击确认
*/
const Submit = () => {
  detailsDialogVisible.value = false
}

/**
* 查看详情|入库审批|出库审批
*/
const goodsClick = (item: any, isBtn: boolean) => {
  if ((isBtn && (item.taskProcess == '入库审批' || item.taskProcess === '出库审批')) || (!isBtn && item.taskProcess !== '入库审批' && item.taskProcess !== '出库审批')) {
    queryGoodsRegDetail({ regId: item.regId, taskId: item.taskId }).then(res => {
      let inRejectData = {} // 入库审批驳回;
      let jectData = {} // 入库信息
      let outData = {} // 出库信息
      let outRejectData = {} // 出库审批驳回
      let completeData = {} // 已出库信息
      if (Array.isArray(res.data.list)) {
        res.data.list.forEach((ele: any) => {
          let nodeData = ele?.nodeContent ? JSON.parse(ele.nodeContent) : {}
          if (ele.nodeName === '入库审批' && Object.keys(jectData).length === 0) {
            jectData = { ...ele, nodeData };
          } else if (ele.nodeName === '入库审批驳回' && Object.keys(inRejectData).length === 0) {
            inRejectData = { ...ele, nodeData };
          } else if (ele.nodeName === '出库审批' && Object.keys(outData).length === 0) {
            outData = { ...ele, nodeData };
          } else if (ele.nodeName === '已出库' && Object.keys(outRejectData).length === 0) {
            completeData = { ...ele, nodeData };
          } else if (ele.nodeName === '出库审批驳回' && Object.keys(outRejectData).length === 0) {
            outRejectData = { ...ele, nodeData };
          }
        })
      }
      if (isBtn) {
        clearForm()
      }
      let newImgArr: Array<string> = [];
      if (item?.goodsFiles?.length) {
        item.goodsFiles.forEach((ele: FileDataType) => {
          ele.resourceAddress && (newImgArr.push(ele.resourceAddress))
        })
      }
      imageInfo.imgArr = newImgArr
      imageInfo.imageIndex = 0
      imageInfo.imgLen = newImgArr.length
      console.log('1111', { ...item, inRejectData, jectData, outData, outRejectData, completeData })
      goodsObject.value = { ...item, inRejectData, jectData, outData, outRejectData, completeData }
      tilte.value = item.taskProcess
      detailsDialogVisible.value = true
      dialogWidth.value = '1000px'
      defaultButton.value = false
    })
  }

}

/**
* 获取类型列表
*/
const getTypeData = async () => {
  const res = await queryGoodsTypeFind()
  let result = res?.data || []
  typeData.value = result;
  if (result.length) {
    let newFilterData = filterData.value
    let index = newFilterData.findIndex(item => item.prop === 'goodsType')
    newFilterData[index].inputProps.options = [...result.map((item: { goodsType: string, typeId: string }) => ({ label: item.goodsType, value: item.typeId }))]
    filterData.value = newFilterData
  }
}

const clearForm = () => {
  form.type = 0
  form.storeTerminal = ''
  form.storePosition = ''
  form.remarks = ''
  form.fileList = []
}

/**
* 获取字典数据
*/
const loadDict = async () => {
  let placeRes = await getResource('lose_deposit_place'); // 加载存放地数据字典
  let terminalRes = await getResource('terminal') // 加载航站楼数据字典
  let places = placeRes?.data?.properties?.meta || []
  let terminals = terminalRes?.data?.properties?.meta || []
  placeData.value = places
  terminalData.value = terminals
  if (terminals.length) {
    let newFilterData = JSON.parse(JSON.stringify(filterData.value))
    let index = newFilterData.findIndex((item: { prop: string }) => item.prop === 'storeTerminal')
    newFilterData[index].inputProps.options = [...terminals]
    filterData.value = newFilterData
  }
}

// 分页
const sizeChange = (size: number) => {
  pager.pageSize = size
  getData()
}
const currentChange = (value: number) => {
  pager.currentPage = value
  getData()
}

// const exampleOptions = ref(exampleOptionsFirst)
const filterKey = ref('exampleOptionsFirst')
const search = ref({})
const getData = () => {
  loading.value = true
  let searchData = { ...pager, pageNum: pager.currentPage, condition: { ...search.value } }
  if (search.value.endTime && search.value.endTime?.length > 0) {
    searchData.condition.startTime = search.value.endTime[0] && dayjs(search.value.endTime[0]).format('YYYY-MM-DD 00:00:00') || ''
    searchData.condition.endTime = search.value.endTime[1] && dayjs(search.value.endTime[1]).format('YYYY-MM-DD 23:59:59') || ''
  } else {
    delete searchData.condition.endTime
  }
  if (search.value.goodsType) {
    searchData.condition.goodsType = searchData.condition.goodsType.join(' ')
  }
  if (search.value.storeTerminal) {
    searchData.condition.storeTerminal = searchData.condition.storeTerminal.join(' ')
  }
  searchData.condition.taskProcess = taskProcess.value
  queryGoodsRegFindPage(searchData).then(res => {
    let list = res?.data?.list
    list.forEach((item: ItemType) => {
      if (item.goodsLimitTime) {
        const date1 = dayjs(item.goodsLimitTime)
        let dateNow = dayjs()
        let limitTime = date1.diff(dateNow, 'hour') // 过期时间
        item.limitTime = limitTime
      } else {
        item.limitTime = 99
      }
      item.taskContent && (item.taskContent = JSON.parse(item.taskContent))
      item.nodeContent && (item.nodeContent = JSON.parse(item.nodeContent))
    })
    console.log('list111', list)
    loading.value = false
    tableData.value = list
    pager.total = res?.data?.total
  }).catch(() => {
    loading.value = false
  })
}
const getList = () => {
  let payload = '入库审批,入库审批驳回,已入库,出库审批,出库审批驳回,已出库'
  let list1: Array<DataType> = [] //入库被驳回
  let list2: Array<DataType> = [] //出库被驳回
  let list3: Array<DataType> = [] //入库审批
  let list4: Array<DataType> = [] //已入库
  let list5: Array<DataType> = [] //出库审批
  let list6: Array<DataType> = [] //已出库

  queryGoodsRegFindList(payload).then(res => {
    let list = res?.data || []
    list.forEach((item: DataType) => {
      let newTaskProcess = item.taskProcess
      switch (newTaskProcess) {
        case '入库审批驳回':
          list1.push(item)
          break
        case '出库审批驳回':
          list2.push(item)
          break
        case '入库审批':
          list3.push(item)
          break
        case '已入库':
          list4.push(item)
          break
        case '出库审批':
          list5.push(item)
          break
        case '已出库':
          list6.push(item)
          break
        default:
          break;
      }
    })
    allDataInfo[1].list = list1;
    allDataInfo[1].num = list1.length;
    allDataInfo[2].list = list2;
    allDataInfo[2].num = list2.length;
    allDataInfo[3].list = list3;
    allDataInfo[3].num = list3.length;
    allDataInfo[4].list = list4;
    allDataInfo[4].num = list4.length;
    allDataInfo[5].list = list5;
    allDataInfo[5].num = list5.length;
    allDataInfo[6].list = list6;
    allDataInfo[6].num = list6.length;
    console.log('allDataInfo', allDataInfo)
  })
}

/**
* 点击查询
*/
const searchChange = (data: FilterDataType) => {
  search.value = data
  getData()
}

/**
* 点击重置
* @param data 数据
*/
const searchReset = (data: FilterDataType) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  getData()
}

watch(() => [activeName.value, activeFirstName.value, activeSecondName.value, filterData.value], (val, oldVal) => {
  let value = val[0]
  let value1 = val[1]
  let value2 = val[2]
  let newFilterData = val[3]
  let filterNames: Array<string> = []
  if (value === 'first' && (value1 === 'approve' || value1 === 'warehousing')) {
    filterNames = value1 === 'approve' ? ['入库位置', '入库时间'] : ['入库时间']
  } else if (value === 'second' && (value2 === 'approve' || value2 === 'warehousing')) {
    filterNames = value2 === 'approve' ? ['入库位置'] : ['入库时间']
  } else {
    filterNames = ['入库时间']
  }
  let filterList = newFilterData.filter((item: any) => !filterNames.includes(item.label))
  filterKey.value = `${Date.now()}`
  exampleOptions.value = filterList
})
watch(() => [activeName.value, activeFirstName.value, activeSecondName.value], (val, oldVal) => {
  tableData.value = []
  let newTaskProcess = ''
  let newStatus = 0;
  if (activeName.value === 'first') {
    switch (activeFirstName.value) {
      case 'approve':
        newStatus = 3;
        newTaskProcess = '入库审批'
        break;
      case 'warehousing':
        newStatus = 4;
        newTaskProcess = '已入库'
        break;
      case 'reject':
        newStatus = 1;
        newTaskProcess = '入库审批驳回'
        break;
      default:
        break;
    }
  } else {
    switch (activeSecondName.value) {
      case 'approve':
        newStatus = 5;
        newTaskProcess = '出库审批'
        break;
      case 'warehousing':
        newStatus = 6;
        newTaskProcess = '已出库'
        break;
      case 'reject':
        newStatus = 2;
        newTaskProcess = '出库审批驳回'
        break;
      default:
        break;
    }
  }
  status.value = newStatus;
  taskProcess.value = newTaskProcess;
  getData()
})
status
watch(() => detailsDialogVisible.value, (value) => {
  if (value) {
    btnloading.value = false;
  }
})

onBeforeMount(() => {
  let filterList = filterData.value.filter((item) => item.label !== '入库位置' && item.label !== '入库时间')
  exampleOptions.value = filterList
  getTypeData()
  loadDict()
  getData()
  getList()
})
</script>

<style lang="less" scoped>
.badge {
  background-color: red;
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  height: 18px;
  padding: 0 6px;
  white-space: nowrap;
  // border: 1px solid #fff;
  position: absolute;
  top: 0;
  right: calc(1px + 18px / 2);
  transform: translateY(-50%) translate(100%);
  z-index: 1;
}

.subscript {
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 17px;
  color: #fff;
  background: red;
  font-size: 10px;
  border-radius: 50%;
  top: -6px;
  line-height: 16px;
  right: 0px;
}

.out-card {
  background: #f5f7f9;
  overflow: hidden;
  @titleFontFamily: "HarmonyOS_Sans_SC_Medium";

  .card-content {
    padding: 12px 24px 24px;
    margin: 12px 12px 0;
    background: #FFF;
    border-radius: 8px;

    &.card-search {
      padding-bottom: 0;
    }

    .content-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;

      .title {
        font-size: 16px;
        font-family: @titleFontFamily;
        color: #353A42;
        line-height: 24px;
        font-weight: bolder;
      }
    }
  }
}

.out-btn {
  background: transparent;
  color: #409eff;
}

.table-common {
  width: 100%;
  background-color: #fff;

  .goods {
    max-height: 450px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;

    .goods_content {
      width: calc(100% / 3 - 24px);
      min-height: 180px;
      background: #F3F4F7;
      border-radius: 8px;
      margin-top: 24px;
      margin-right: 24px;
      display: flex;
      align-items: center;
      position: relative;
      flex-wrap: wrap;
      padding: 24px;
      box-sizing: border-box;

      .image {
        width: 132px;
        height: 132px;
        border-radius: 10px;
        margin-left: 10px;
      }

      .message {
        width: calc(100% - 132px - 56px);
        margin-left: 24px;

        .message_btn {
          position: absolute;
          bottom: 24px;
          right: 8px;
        }

        .message_content {
          display: flex;

          .type {
            width: 100%;
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC_Bold;
            color: #535862;
            font-weight: bolder;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .headline {
            width: 70px;
            height: 22px;
            font-size: 14px;
            font-family: HarmonyOS_Sans_SC;
            color: #989DAA;
            line-height: 22px;
          }

          .headline_content {
            height: 22px;
            font-size: 14px;
            font-family: HarmonyOS_Sans_SC;
            color: #535862;
            line-height: 22px;
          }
        }
      }
    }

    .hidden_overdue {
      display: none;
    }

    .red_overdue {
      height: 28px;
      background: rgba(255, 71, 36, 0.12);
      border-radius: 6px;
      border: 1px solid rgba(255, 76, 45, 0.4);
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #F24A45;
      line-height: 28px;
      padding-left: 8px;
      padding-right: 8px;
      position: absolute;
      top: 8px;
      right: 8px;
    }

    .green_overdue {
      height: 28px;
      background: rgba(255, 179, 31, 0.12);
      border-radius: 6px;
      border: 1px solid rgba(255, 159, 58, 0.4);
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #FF8F3A;
      line-height: 28px;
      padding-left: 8px;
      padding-right: 8px;
      position: absolute;
      top: 8px;
      right: 8px;
    }
  }
}

.body_box {
  display: flex;

  .body_message {
    width: 50%;
    display: flex;

    .message_title {
      width: 120px;
      text-align: left;
      margin-bottom: 8px;
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #989DAA;
    }

    .message_img_box {
      >img {
        width: 50px;
        height: 50px;
        margin-left: 10px;
        cursor: pointer;
      }
    }

    .name_box {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message_content {
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #535862;
      margin-left: 10px;
    }
  }
}

.detail_content {
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 24px;
  padding-bottom: 0px;



  .image-box {
    user-select: none;

    .content_img {
      width: 240px;
      height: 240px;
      cursor: pointer;
    }

    .image-box-top {
      display: flex;
      align-items: center;

    }

    .image-box-bottm {
      width: 300px;
      align-items: center;
      margin-top: 10px;
      text-align: center;

      >img {
        width: 50px;
        height: 30px;
        cursor: pointer;
        margin: 0 5px;
        padding: 3px;
      }
    }
  }

  .detail_body {
    width: 660px;
    height: 240px;
    background: rgba(238, 243, 255, 0.56);
    border-radius: 8px;
    margin-left: 24px;
    padding-left: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;

    .message_title {
      text-align: right;
    }
  }
}

.out-operate {
  padding: 20px;

  .out-flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }


  .out-operate-box {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .out-operate-box-label {
      width: 80px;
    }

    /deep/.el-upload__input {
      margin: 0;
    }
  }

  .out-operate-title {
    font-weight: bold;
    margin: 0 0 10px;
  }
}

.dialog-footer {
  /deep/.el-button {
    min-width: 88px;
  }

  .buttonOk {
    background: transparent;
    border: 1px solid red;
    color: red
  }
}

.out-box {
  max-height: 450px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;

  .out-box_default {
    background: rgba(204, 203, 203, 0.1);
    border: 1px solid #d6d4d4;
  }

  .out-box_active {
    background: rgba(6, 102, 246, 0.1);
    border: 1px solid #409EFF;
  }

  .out-box_content {
    width: calc(100% / 3 - 28px);
    min-height: 180px;
    padding: 10px 0;
    border-radius: 8px;
    margin-top: 24px;
    margin-right: 24px;
    display: flex;
    align-items: center;
    position: relative;

    .image {
      width: 132px;
      height: 132px;
      border-radius: 10px;
      margin-left: 10px;
    }

    .out-box-message {
      margin-left: 24px;

      .message-icon {
        position: absolute;
        top: 10px;
        right: 10px;

      }

      .message_content {
        display: flex;

        .type {
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          font-family: HarmonyOS_Sans_SC_Bold;
          color: #535862;
          font-weight: bolder;
        }

        .headline {
          width: 70px;
          height: 22px;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #989DAA;
          line-height: 22px;
        }

        .headline_content {
          height: 22px;
          font-size: 14px;
          font-family: HarmonyOS_Sans_SC;
          color: #535862;
          line-height: 22px;
        }
      }
    }
  }

  .hidden_overdue {
    display: none;
  }

  .red_overdue {
    height: 28px;
    background: rgba(255, 71, 36, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 76, 45, 0.4);
    font-size: 14px;
    font-family: HarmonyOS_Sans_SC;
    color: #F24A45;
    line-height: 28px;
    padding-left: 8px;
    padding-right: 8px;
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .green_overdue {
    height: 28px;
    background: rgba(255, 179, 31, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 159, 58, 0.4);
    font-size: 14px;
    font-family: HarmonyOS_Sans_SC;
    color: #FF8F3A;
    line-height: 28px;
    padding-left: 8px;
    padding-right: 8px;
    position: absolute;
    top: 8px;
    right: 8px;
  }
}

#printContent {
  display: none;
  margin-right: 5px;
  border-top: 1px solid #cdd0d6;

  .print-th {
    background: #f3f4f7;
    font-weight: bold;
  }

  .print-row {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #cdd0d6;
    border-left: 1px solid #cdd0d6;

    >div {
      width: 6.66%;
      text-align: center;
      padding: 16px 0;
      word-wrap: break-word;
      word-break: break-all;
      line-break: anywhere;
      border-right: 1px solid #cdd0d6;
    }
  }
}

.edit-modal {
  background: red;

  /deep/.el-dialog__header {
    padding: 20px 0 0;
  }

  /deep/.el-dialog__body {
    padding: 0;
  }

  /deep/.el-dialog__footer {
    padding-top: 0;
  }
}

/deep/.el-table {
  --el-table-border-color: #cdd0d6;
}
</style>
